import React, {useEffect} from 'react';
import {bindActionCreators} from "redux";
import {connect} from "react-redux";
import {Popover, PopoverBody, PopoverHeader} from "reactstrap";
import {CloseIcon, Edit} from "../../icons";
import {Trash} from "react-feather";
import {deleteCost, deleteItem} from "../../../../../../redux/actions/eventDetail/tabCosts";
import {setFieldData} from "../../../../../../redux/actions/helper";
import {SET_COST_FIELD} from "../../../../../../redux/constants/eventDetail/tabCosts";
import {PrivateProjectProvider} from "../../../../../../providers/PrivateProjectProvider";

const About = props => {
  const {
    eventId,
    cost,
    setTooltipId,
    tooltipId,
    placement,
    owner,
    verifyId,
    deleteCost,
    reqParams,
    params,
    setFieldData,
    isCost,
    deleteItem,
    templateId
  } = props

  const handleClickOutside = event => {
    let costId = document.getElementsByClassName(`popover-cost-${cost.id}`)
    if (costId[0] && !costId[0].contains(event.target) && window.innerWidth >= 650) {
      setTooltipId(null)
      return
    }
  };

  useEffect(() => {
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    }
  }, [])

  const destroy = () => {
    if (isCost)
      deleteCost(cost.id, reqParams, eventId)
    else
      deleteItem(cost.id, reqParams, templateId)
  }


  return (
    <React.Fragment>
      <Popover
        popperClassName={`popover-cost popover-cost-${cost.id}`}
        placement={placement}
        target={`popover-cost-${cost.id}`}
        isOpen={tooltipId === cost.id}
      >
        <PopoverHeader>
          <div className="popover-cost-header">
            <div className="popover-cost-name">{cost.name}</div>
            <span className="popover-cost-close">
                <CloseIcon
                  height="16"
                  width="16"
                  onClick={() => setTooltipId(null)}
                />
              </span>
          </div>
        </PopoverHeader>
        <PopoverBody>
          <div className="cost-popover-content">
            <div className="text-left">
              {cost.description}
            </div>
            <div className="cost-popover-footer">
              <PrivateProjectProvider owner={owner} verifyId={verifyId}>
                <div className="cost-popover-edit text-right cursor-pointer" onClick={() => {
                  setTooltipId(null)
                }}>
                <span className="cost-popover-edit-icon danger">
                    <Trash size={18} onClick={
                      () => destroy()
                    }/>
                </span>
                  <span className="cost-popover-edit-icon danger pl-1">
                    <Edit size={18} onClick={() => {
                      setTooltipId(null)
                      setFieldData(SET_COST_FIELD, 'params', {...params, cost_id: cost.id, isOpenModal: true})
                    }
                    }/>
                </span>
                </div>
              </PrivateProjectProvider>

              {
                cost.link && <div className="text-right cursor-pointer">
                  <a className="cost-popover-edit-text" target="_blank" href={cost.link}>Читать подробнее</a>
                </div>
              }
            </div>
          </div>
        </PopoverBody>
      </Popover>
    </React.Fragment>
  );

}

const mapStateToProps = state => ({
  reqParams: state.eventCosts.reqParams,
  params: state.eventCosts.params,
  owner: state.eventInfo.event.project.owner && state.eventInfo.event.project.owner.id || null,
  verifyId: state.users.data.verify_id,
});
const mapDispatchToProps = dispatch => bindActionCreators({deleteCost, setFieldData, deleteItem}, dispatch);

export default connect(mapStateToProps, mapDispatchToProps)(About);
